<template>
  <div class="city-address-list-item" @click="handleSkipMsite">
    <div class="title">
      {{ item.name }}
    </div>
    <div class="address">
      {{ item.address }}
    </div>
  </div>
</template>

<script>
export default {
  props: {
    item: Object,
    default() {
      return {};
    },
  },
  methods: {
    handleSkipMsite() {
      const path = `${this.item.latitude},${this.item.longitude}`;
      this.$router.push({ path: "/msite", query: { geohash: path } });
      
      // localstroage缓存位置信息
      const placeHistory =
        localStorage.getItem("placeHistory") === null
          ? []
          : JSON.parse(localStorage.getItem("placeHistory"));
      let existence = JSON.stringify(placeHistory).includes(this.item.name);
      if (!existence) {
        placeHistory.push(this.item);
        localStorage.setItem("placeHistory", JSON.stringify(placeHistory));
      }
    },
  },
};
</script>
<style lang="less" scoped>
.city-address-list-item {
  background-color: #fff;
  padding: 20px;
  border-bottom: 1px solid #e6e5f8;
  .address {
    margin: 10px 0;
    font-size: 12px;
    color: #b7aca3;
  }
}
</style>